<template>
  <div class="sj-form">
    <stepBar length=100></stepBar>
    <div class="form-main">
      <ul class="select-last ">
        <li>
          <div class="input-box flex-box">
            <div><p>是否有家族遗传病史</p>
              <input type="radio" name="BingShi" :checked = !otherMsg.isBingShi.value @click="showA(false)"><b>无</b>
              <input type="radio" name="BingShi" :checked = otherMsg.isBingShi.value @click="showA(true)"><b>有</b>
            </div>
          </div>
          <transition name="fade-a">
            <div class="condition-a" v-show="otherMsg.isBingShi.value">
              <div class="input-box flex-box">
                <div>
                  <!-- <p>遗传病史描述<span class="btn-que">?</span></p> -->
                  <input type="text" class="bs-desc" v-model="otherMsg.isBingShi.describe.value">
                </div>
              </div>
              <div class="condition-a-desc">
                <p>请描述亲属关系、疾病名称、发病年龄和症状。</p>
                <!-- <a href="#" @click="otherMsg.isBingShi.value = !otherMsg.isBingShi.value">收起</a> -->
              </div>
            </div>
          </transition>
        </li>
        <li>
          <div class="input-box flex-box">
            <div>
              <p>是否有异常疾病表现</p>
              <input type="radio" name="YiChang" :checked = !otherMsg.isYiChang.value @click="showB(false)"><b>无</b>
              <input type="radio" name="YiChang" :checked = otherMsg.isYiChang.value @click="showB(true)"><b>有</b>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-b input-box flex-box" v-show="otherMsg.isYiChang.value">
              <div><p>临床表现描述<span class="btn-que">?</span></p>
                <input type="text" v-model="otherMsg.isYiChang.describe.value" placeholder="请描述症状和相应检查结果">
              </div>
            </div>
          </transition>
        </li>
        <li>
          <div class="input-box flex-box">
            <div>
              <p>父母是否近亲结婚</p>
              <input type="radio" name="JinQin" :checked = !otherMsg.isJinQin.value @click="showC(false)"><b>否</b>
              <input type="radio" name="JinQin" :checked = otherMsg.isJinQin.value @click="showC(true)"><b>是</b>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.isJinQin.value">
              <div><p>亲缘关系</p><input type="text" v-model="otherMsg.isJinQin.describe.value" placeholder="如，父母是表兄妹"></div>
            </div>
          </transition>
        </li>
        <!-- <li>
          <div class="input-box flex-box">
            <div>
              <p>临床表现</p>
              <input type="radio" name="LinChuang" :checked = !otherMsg.isLinChuang.value @click="showD(false)"><b>无</b>
              <input type="radio" name="LinChuang" :checked = otherMsg.isLinChuang.value @click="showD(true)"><b>有</b>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.isLinChuang.value">
              <div><p>临床表现描述</p><input type="text" v-model="otherMsg.isLinChuang.describe.value" placeholder="选填"></div>
            </div>
          </transition>
        </li> -->
        <li>
          <div class="input-box flex-box"><div>
            <p>受检者类型</p>
            <p class="sec-btn" @click="selectCheck">{{otherMsg.shouJianType.selectType}}
              <span v-show="otherMsg.shouJianType.selectType === '请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.shouJianType.showOther">
              <div><p>其他描述</p><input type="text" v-model="otherMsg.shouJianType.describe.value" placeholder="选填"></div>
            </div>
          </transition>
        </li>
        <li>
          <div class="input-box flex-box"><div>
            <p>癌症类型</p>
            <p class="sec-btn" @click="showPicker0">{{otherMsg.cancerType.selectType}}
              <span v-show="otherMsg.cancerType.selectType === '请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.cancerType.showOther">
              <div><p>癌症类型其他描述</p><input type="text" v-model="otherMsg.cancerType.describe.value" placeholder="选填"></div>
            </div>
          </transition>
        </li>
      </ul>
    </div>
    <div class="fixed-form-foot">
      <div class="form-foot">
        <div class="form-foot-main">
          <router-link to="/sjFormc"><button class="pre-page">上一步</button></router-link>
          <button @click="formdSubmit" class="next-page">下一步</button>
        </div>
      </div>
    </div>
    <awesome-picker
      ref="picker0"
      :textTitle="picker0.textTitle"
      :data="picker0.data"
      :anchor="picker0.anchor"
      @confirm="handlePicker0Confirm">
    </awesome-picker>
    <selectBox v-if="selectShow" :selectValue="otherMsg.shouJianType.type" :showSelect="selectShow" @tcClothe="tcClothe"></selectBox>
  </div>
</template>
<script>
import Vue from 'vue'
import stepBar from '@/quanjiyin/components/StepBar.vue'
import selectBox from '@/quanjiyin/components/SelectBox.vue'
import AwesomePicker from 'vue-awesome-picker'
Vue.use(AwesomePicker)
const STORAGE_KEY = 'formdMsg'
const data0 = []
export default {
  data() {
    return {
      selectShow: false,
      otherMsg: {
        isBingShi: {
          key: '是否有家族遗传病史',
          value: false,
          describe: {
            key: '遗传病史描述',
            value: ''
          }
        },
        isYiChang: {
          key: '是否有异常疾病表现',
          value: false,
          describe: {
            key: '疾病表现描述',
            value: ''
          }
        },
        isJinQin: {
          key: '父母是否近亲结婚',
          value: false,
          describe: {
            key: '亲缘关系',
            value: ''
          }
        },
        isLinChuang: {
          key: '临床表现',
          value: false,
          describe: {
            key: '临床表现描述',
            value: ''
          }
        },
        shouJianType: {
          key: '受检者类型',
          value: false,
          showOther: false,
          type: ['表现正常人群', '其它', '确证患者', '疑似患者'],
          selectType: '表现正常人群',
          selectIndex: '',
          describe: {
            key: '受检者类型-其他描述',
            value: ''
          }
        },
        cancerType: {
          key: '癌症类型',
          value: false,
          showOther: false,
          type: [
            '无',
            '非小细胞肺癌',
            '小细胞肺癌',
            '恶性胸膜间皮瘤',
            '结直肠癌',
            '胃癌',
            '胰腺癌',
            '肝胆癌',
            '食道癌',
            '肛门癌',
            '甲状腺癌',
            '胸腺癌/胸腺瘤',
            '默克尔细胞癌',
            '神经内分泌肿瘤',
            '非黑色素瘤皮肤癌',
            '中枢神经系统肿瘤',
            '肾癌',
            '前列腺癌',
            '卵巢癌',
            '宫颈癌',
            '阴茎癌',
            '外阴癌',
            '膀胱癌',
            '子宫肿瘤',
            '睾丸癌',
            '骨癌',
            '乳腺癌',
            '软组织肉瘤',
            '头颈癌',
            '黑色素瘤',
            '其它'
          ],
          selectType: '无',
          selectIndex: '',
          describe: {
            key: '受检者类型-其他描述',
            value: ''
          }
        }
      },
      picker0: {
        anchor: [],
        textTitle: '',
        data: [data0]
      },
      storageLists: this.$localStorage.fetch(STORAGE_KEY)
    }
  },
  components: {
    stepBar,
    selectBox
  },
  computed: {
    reverseValue(val) {
      // `this` 指向 vm 实例
      return !val
    }
  },
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY, storageLists)
      },
      deep: true
    }
  },
  methods: {
    showPicker0() {
      this.$refs.picker0.show()
    },
    handlePicker0Confirm(v) {
      // console.log(v);
      this.otherMsg.cancerType.selectType = v[0].value
      this.otherMsg.cancerType.selectIndex = v[0].index
      this.otherMsg.cancerType.value = true
      this.otherMsg.cancerType.showOther = false
      if (this.otherMsg.cancerType.selectType === '其它') {
        this.otherMsg.cancerType.showOther = true
      }
    },
    showA(val) {
      this.otherMsg.isBingShi.value = val
      if (this.otherMsg.isBingShi.value === false) {
        this.otherMsg.isBingShi.describe.value = ''
      }
    },
    showB(val) {
      this.otherMsg.isYiChang.value = val
      if (this.otherMsg.isYiChang.value === false) {
        this.otherMsg.isYiChang.describe.value = ''
      }
    },
    showC(val) {
      this.otherMsg.isJinQin.value = val
      if (this.otherMsg.isJinQin.value === false) {
        this.otherMsg.isJinQin.describe.value = ''
      }
    },
    showD(val) {
      this.otherMsg.isLinChuang.value = val
      if (this.otherMsg.isLinChuang.value === false) {
        this.otherMsg.isLinChuang.describe.value = ''
      }
    },
    selectCheck() {
      this.selectShow = true
    },
    tcClothe(data) {
      // console.log(data);
      this.otherMsg.shouJianType.selectIndex = data ? data.index : ''
      if (data != undefined) {
        this.otherMsg.shouJianType.selectType = data.value
        this.otherMsg.shouJianType.value = true
        this.otherMsg.shouJianType.showOther = false
      }
      if (this.otherMsg.shouJianType.selectType === '其它') {
        this.otherMsg.shouJianType.showOther = true
      }
      this.selectShow = false
    },
    formdSubmit() {
      if (this.otherMsg.isBingShi.value === true && this.otherMsg.isBingShi.describe.value === '') {
        this.$layer.open({
          content: '请描述遗传病史',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (
        this.otherMsg.isYiChang.value === true &&
        this.otherMsg.isYiChang.describe.value === ''
      ) {
        this.$layer.open({
          content: '请填写临床表现描述',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (
        this.otherMsg.isJinQin.value === true &&
        this.otherMsg.isJinQin.describe.value === ''
      ) {
        this.$layer.open({
          content: '请填写亲缘关系',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.otherMsg.shouJianType.selectType === '请选择') {
        this.$layer.open({
          content: '请选择受检者类型',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.otherMsg.cancerType.selectType === '请选择') {
        this.$layer.open({
          content: '请选择癌症类型',
          skin: 'msg',
          time: 2
        })
        return false
      } else {
        window.localStorage.removeItem('formdMsg')
        setTimeout(() => {
          this.storageLists = this.otherMsg
        }, 0)
        setTimeout(() => {
          // console.log(window.localStorage);
          console.log(this.$localStorage.fetch(STORAGE_KEY))
          this.$router.push('/SjSubmit')
        }, 10)
      }
    }
  },
  mounted() {
    data0.length = 0
    for (let i in this.otherMsg.cancerType.type) {
      data0.push(this.otherMsg.cancerType.type[i])
    }
    // window.localStorage.removeItem("formdMsg");
    this.otherMsg = window.localStorage.formdMsg
      ? JSON.parse(window.localStorage.formdMsg)
      : this.otherMsg
  }
}
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  min-height: 100vh;
  padding-bottom: r(70);
  box-sizing: border-box;
  .form-main {
    margin-top: r(28);
    .btn-que {
      width: r(16);
      height: r(16);
      border-radius: 10px;
      background: #dedede;
      color: #fff;
      display: inline-block;
      margin-left: r(8);
      font-size: r(14);
      line-height: r(16);
    }
    input[type='checkbox'],
    input[type='radio'] {
      width: 24px;
    }
    ul {
      li {
        height: auto;
        background: #f9fafd;
        b {
          float: right;
          font-size: r(16);
          color: #717276;
          margin-top: r(6);
          margin-left: r(18);
        }
        p {
          margin-top: r(8);
          &.sec-btn {
            float: right;
            color: #ccc;
          }
        }
      }
      .condition-a {
        width: 100%;
        height: r(137);
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        .input-box {
          height: r(65);
          p {
            margin-top: r(4);
          }
          .bs-desc {
            width: 100%;
            text-align: left;
          }
        }
        .condition-a-desc {
          width: 100%;
          overflow: hidden;
          background: #eee;
          padding: r(6);
          box-sizing: border-box;
          margin-top: r(10);
          margin-bottom: r(12);
          text-align: left;
          p {
            font-size: r(12);
            color: #666666;
            letter-spacing: 0;
            line-height: r(22);
            margin-top: r(4);
          }
          a {
            display: inline-block;
            color: #66b9fe;
            text-decoration: underline;
            margin-top: r(6);
            margin-bottom: r(6);
          }
        }
      }
      .fade-a-enter-active,
      .fade-a-leave-active {
        transition: all 0.35s;
        height: r(137);
      }
      .fade-a-enter,
      .fade-a-leave-to {
        opacity: 0;
        height: 0;
      }
    }
  }
  .fixed-form-foot {
    position: fixed;
    width: 100%;
    background: #fff;
    height: r(70);
    left: 0;
    bottom: 0;
  }
}
.fade-b-enter-active,
.fade-b-leave-active {
  transition: all 0.25s;
  height: r(65);
}
.fade-b-enter,
.fade-b-leave-to {
  opacity: 0;
  height: 0;
}
</style>
